import { getQueryParams } from "@shared/utils";
import { useEffect, useState } from "react";
import './index.less'
const { callApi } = window.h5OpenSdk;
const prefixCls = 'notice-detail';

export default function NoticeListPage() {
  const { namespaceId, announcementId, communityId, bulletinId } = getQueryParams();
  const [announcement, setAnnouncement] = useState<any>({});
  const getAnnouncement = () => {
    callApi({
      api: '/announcement/getAnnouncement',
      data: {
        announcementId: 11,
        communityId: 240111044332061004
      },
      success: (res: any) => {
        console.log(res)
        setAnnouncement(res)
      }
    })
  }
  useEffect(() => {
    callApi({
      api: '/appUrl/getAppInfo',
      data: {
        namespaceId,
      },
      success: (res: any) => {
        getAnnouncement()
      }
    })
  }, [])
  const getContent = (embeddedJson: any, content: any, attachments: any, subject: any) => {
    let dom = null;
    if (embeddedJson) {
      let json = JSON.parse(embeddedJson);
      const { contentType, richContent, coverUri, content: linkContent } = json;
      if (contentType === 'create') {  // 图文
        dom = <div className='rich-content' dangerouslySetInnerHTML={{
          __html: richContent
        }}></div>
      } else if (contentType === 'forward') {  // 链接
        dom = <a className='link-content' href={linkContent}>
          <span className='link-cover' style={{ backgroundImage: `url(${coverUri || 'LinkIcon'})` }}></span>
          <div>{subject}</div>
        </a>
      }
    } else {  // 普通
      let description = content.replace(/\r\n/g, '<br/>');
      description = description.replace(/\n/g, '<br/>');
      description = description.replace(/\s/g, '&nbsp;');
      dom = <div className='content'>
        {/* <div dangerouslySetInnerHTML={{
          __html: description
        }} /> */}
        <pre style={{
          whiteSpace: 'pre-wrap',
          width: '100%',
          wordWrap: 'break-word'
        }}>
          {content}
        </pre>
        {
          attachments.length > 0
            ?
            attachments.map(({ contentUrl }: any, index: any) => <img className='attachment' src={contentUrl} key={index} />)
            :
            null
        }
      </div>
    }

    return dom;
  }
  const { subject = '', creatorAvatarUrl, createTime, creatorNickName = '', embeddedJson, content = '', attachments = [], likeFlag, likeCount, id, interactFlag, ownerToken, viewCount, fileAttachments = [] } = announcement;
  const toggleLike = (likeFlag: any, id: any) => {
  }
  return <div>

    <div className={prefixCls} >
      <div className='subject'>subject</div>
      <div className='basic-info'>
        <img src={''} onError={(e) => {
          // e.target.src = defaultAvatar
        }} />
        <div className='wrap'>
          <div className='nick-name'>nickName</div>
          <div className='create-time'>createTime</div>
        </div>
      </div>
      <div className='content-wrap'>
        {getContent(embeddedJson, content, attachments, subject)}
      </div>
      <div className='opera-list'>
        <span className='like' onClick={() => toggleLike(likeFlag, id)}>
          {/* <img src={Number(likeFlag) === 1 ? likePressedIcon : likeNormalIcon} /> */}
          <span className={Number(likeFlag) === 1 ? 'pressed' : ''}>{Number(likeCount) === 0 ? 'likeCount' : likeCount}</span>
        </span>
        <span className='like' style={{ marginRight: '0.16rem' }}>
          {/* <img src={viewIcon} /> */}
          <span>{viewCount}</span>
        </span>
        {/* {
      Number(userId) === Number(creatorUid)
        ?
        <span className='delete' onClick={() => delete(forumId, id)}>删除</span>
        :
        null
    } */}
      </div>
      {/* {'测试附件文件'+ JSON.stringify(fileAttachments)} */}
      {fileAttachments.length > 0 && <div className='flie-list'>
        <p>附件（{fileAttachments.length}）</p>
        <div className='list'>
          {fileAttachments.map((item: any) => {
            return (
              <div className='item' key={item.id} >
                <img src={item.iconUrl} alt="" />
                <div className='info'>
                  <div className='name'>{item.name}</div>
                  <div className='size'>{item.size / 1000}kb</div>
                </div>
              </div>
            )
          })}
        </div>
      </div>}
      {
        Number(interactFlag) === 1
          ?
          <div className='margin'></div>
          :
          null
      }

    </div>
  </div>
}